<template>
  <div class="dashboard">
    <el-row :gutter="20">
      <!-- 统计卡片 -->
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-card-header">
            <span class="stat-card-title">当前告警</span>
            <el-tag type="danger">{{ stats.activeAlerts }}</el-tag>
          </div>
          <div class="stat-card-content">
            <el-progress :percentage="stats.activeAlertsPercentage" status="exception" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-card-header">
            <span class="stat-card-title">平均响应时间</span>
            <el-tag type="warning">{{ stats.avgResponseTime }}分钟</el-tag>
          </div>
          <div class="stat-card-content">
            <el-progress :percentage="stats.avgResponseTimePercentage" status="warning" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-card-header">
            <span class="stat-card-title">平均解决时间</span>
            <el-tag type="info">{{ stats.avgResolveTime }}分钟</el-tag>
          </div>
          <div class="stat-card-content">
            <el-progress :percentage="stats.avgResolveTimePercentage" />
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <div class="stat-card-header">
            <span class="stat-card-title">本月告警总数</span>
            <el-tag type="success">{{ stats.monthlyAlerts }}</el-tag>
          </div>
          <div class="stat-card-content">
            <el-progress :percentage="stats.monthlyAlertsPercentage" status="success" />
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 当前值班人员 -->
    <el-card class="duty-card">
      <template #header>
        <div class="card-header">
          <span>当前值班人员</span>
          <el-button type="primary" size="small" @click="refreshDutyList">刷新</el-button>
        </div>
      </template>
      <el-table :data="dutyList" style="width: 100%">
        <el-table-column prop="realName" label="姓名" width="120" />
        <el-table-column prop="phone" label="联系电话" width="150" />
        <el-table-column prop="email" label="邮箱" width="200" />
        <el-table-column prop="scheduleName" label="排班表" />
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button type="primary" size="small" @click="callUser(scope.row)">呼叫</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 最近告警 -->
    <el-card class="alert-card">
      <template #header>
        <div class="card-header">
          <span>最近告警</span>
          <el-button type="primary" size="small" @click="viewAllAlerts">查看全部</el-button>
        </div>
      </template>
      <el-table :data="recentAlerts" style="width: 100%">
        <el-table-column prop="title" label="标题" />
        <el-table-column prop="severity" label="优先级" width="100">
          <template #default="scope">
            <el-tag :type="getSeverityType(scope.row.severity)">{{ scope.row.severity }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="时间" width="180" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { getCurrentOnDuty } from '@/api/schedule';
import { getAlertList } from '@/api/alert';

const router = useRouter();

// 统计数据
const stats = ref({
  activeAlerts: 5,
  activeAlertsPercentage: 25,
  avgResponseTime: 8,
  avgResponseTimePercentage: 40,
  avgResolveTime: 45,
  avgResolveTimePercentage: 60,
  monthlyAlerts: 128,
  monthlyAlertsPercentage: 85,
});

// 值班人员列表
const dutyList = ref([]);

// 最近告警
const recentAlerts = ref([]);

// 获取值班人员
const getDutyList = async () => {
  try {
    const res = await getCurrentOnDuty();
    dutyList.value = res;
  } catch (error) {
    console.error('获取值班人员失败:', error);
  }
};

// 刷新值班列表
const refreshDutyList = () => {
  getDutyList();
  ElMessage.success('值班列表已刷新');
};

// 呼叫值班人员
const callUser = (user) => {
  ElMessage.success(`正在呼叫 ${user.realName}`);
};

// 获取最近告警
const getRecentAlerts = async () => {
  try {
    const res = await getAlertList({ page: 1, size: 5 });
    recentAlerts.value = res.list;
  } catch (error) {
    console.error('获取最近告警失败:', error);
  }
};

// 查看所有告警
const viewAllAlerts = () => {
  router.push('/alert');
};

// 获取告警优先级类型
const getSeverityType = (severity) => {
  const types = {
    P1: 'danger',
    P2: 'warning',
    P3: 'info',
  };
  return types[severity] || 'info';
};

// 获取告警状态类型
const getStatusType = (status) => {
  const types = {
    TRIGGERED: 'danger',
    ACKED: 'warning',
    RESOLVED: 'success',
  };
  return types[status] || 'info';
};

// 获取告警状态文本
const getStatusText = (status) => {
  const texts = {
    TRIGGERED: '待处理',
    ACKED: '处理中',
    RESOLVED: '已解决',
  };
  return texts[status] || status;
};

onMounted(() => {
  getDutyList();
  getRecentAlerts();
});
</script>

<style lang="scss" scoped>
.dashboard {
  .el-row {
    margin-bottom: 20px;
  }
  
  .stat-card {
    height: 120px;
    
    .stat-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 15px;
      
      .stat-card-title {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
  
  .duty-card, .alert-card {
    margin-bottom: 20px;
    
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style> 